{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import callout with context %}

{% extends "firefox/welcome/base.html" %}

{%- block page_title -%}
  {{ ftl('welcome-page1-more-than-a-browser-mozilla') }}
{%- endblock -%}

{% block page_desc %}{{ ftl('welcome-page1-take-the-next-step-to-protect') }}{% endblock %}

{% block body_class %}{{ super() }} welcome-page1{% endblock %}

{%block page_css %}
 {{ super()}}
 {{ css_bundle('protocol-callout') }}
{% endblock %}

{% set _entrypoint = 'mozilla.org-firefox-welcome-1' %}
{% set _utm_campaign = 'welcome-1-monitor' %}
{% set _cta_type = 'monitor' %}

{% set hero_title = ftl('welcome-page1-stay-ahead-of-hackers-check-v2') %}

{% set _utm_content = 'stay-ahead-hackers' %}

{% block content_intro %}

  {% call callout(
    title=hero_title,
    desc=ftl('welcome-page1-youve-got-the-web-browser'),
    class='mzp-t-firefox mzp-t-dark mzp-t-hero',
    include_cta=True,
    heading_level=1
  ) %}

  <p class="primary-cta">
    {{ monitor_fxa_button(
      entrypoint=_entrypoint,
      button_text=ftl('welcome-page1-check-your-breach-report'),
      optional_parameters={'utm_campaign': _utm_campaign, 'utm_content': _utm_content},
      optional_attributes={'data-cta-text': 'Check Your Breach Report', 'data-cta-type': _cta_type, 'data-cta-position': 'primary'})
    }}
  </p>

  {% endcall %}
{% endblock %}

{% block content_primary %}
<div class="body-primary">
  <h2 class="body-primary-title">
    <img src="{{ static('img/logos/mozilla/monitor/wordmark.svg') }}" width="256" height="" alt="{{ ftl('welcome-page1-mozilla-monitor') }}">
  </h2>

  <div class="body-primary-body">
    <p>
      {{ ftl('welcome-page1-mozilla-monitor-shows-you') }}
    </p>
  </div>
</div>
{% endblock %}

{% block content_secondary %}
<div class="body-secondary">
  <div class="c-picto-block t-adjacent-image">
    <div class="c-picto-block-image">
      <img src="{{ static('img/icons/private-browsing.svg') }}" alt="">
    </div>

    <h3 class="c-picto-block-title">{{ ftl('welcome-page1-stay-ahead-of-hackers') }}</h3>
    <div class="c-picto-block-body">
      <p>
      {{ ftl('welcome-page1-find-ways-to-protect-your', security_tips=breach_tips_url|safe) }}
      </p>
    </div>
  </div>

  {% if LANG.startswith('en-') %}
  <div class="c-picto-block t-adjacent-image">
    <div class="c-picto-block-image">
      <img src="{{ static('img/icons/warning.svg') }}" alt="">
    </div>

    <h3 class="c-picto-block-title">{{ ftl('welcome-page1-stay-in-the-know') }}</h3>
    <div class="c-picto-block-body">
      <p>
      {{ ftl('welcome-page1-were-you-one-of-many', evite_breach='https://blog.mozilla.org/firefox/evite-data-breach/?utm_source=mozilla.org-firefox-welcome-1&utm_medium=referral&utm_campaign=welcome-1-monitor&utm_content=stay-ahead-hackers&entrypoint=mozilla.org-firefox-welcome-1') }}
      </p>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block secondary_cta %}
  <p class="secondary-cta">
    {{ monitor_fxa_button(
      entrypoint=_entrypoint,
      button_text=ftl('welcome-page1-check-your-breach-report'),
      optional_parameters={'utm_campaign': _utm_campaign, 'utm_content': _utm_content},
      optional_attributes={'data-cta-text': 'Check Your Breach Report', 'data-cta-type': _cta_type, 'data-cta-position': 'secondary'})
    }}
  </p>
{% endblock %}

{% block content_utility %}
  <p>
    <strong><a href="https://support.mozilla.org/kb/firefox-browser-welcome-pages/?utm_source=mozilla.org-firefox-welcome-1&utm_medium=referral&utm_campaign=welcome-1-monitor&utm_content=stay-ahead-hackers&entrypoint=mozilla.org-firefox-welcome-1">
      {{ ftl('welcome-page1-why-am-i-seeing-this') }}
    </a></strong>
  </p>
  {% if switch('lifecycle_page1_survey', ['en-US']) %}
  <p><a class="c-survey-link"href="https://qsurvey.mozilla.com/s3/Firefox-Page" rel="external noopener">Share feedback about this page</a></p>
  {% endif %}
{% endblock %}

{% block js %}
  {{ js_bundle('fxa_product_button') }}
{% endblock %}
